import React, { Component } from 'react'

export default class Footer extends Component {
  state = {
    index: 1,
  }
  // 点击全部
  isAll = () => {
    this.props.clickAll()
    this.setState({
      index: 1,
    })
  }
  // 点击Active
  isActive = () => {
    this.props.clickActive()
    this.setState({
      index: 2,
    })
  }
  isCompleted = () => {
    this.props.clickCompleted()
    this.setState({
      index: 3,
    })
  }
  render() {
    const { index } = this.state
    const { Array } = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>
            {Array.filter((item) => item.isDone === false).length}
          </strong>{' '}
          item left
        </span>
        <ul className="filters">
          <li onClick={this.isAll}>
            <a className={[index === 1 ? 'selected' : '']} href="#/">
              All
            </a>
          </li>
          <li onClick={this.isActive}>
            <a className={[index === 2 ? 'selected' : '']} href="#/active">
              Active
            </a>
          </li>
          <li onClick={this.isCompleted}>
            <a className={[index === 3 ? 'selected' : '']} href="#/completed">
              Completed
            </a>
          </li>
        </ul>
        <button
          onClick={this.props.deleteCompleted}
          className={[
            'clear-completed',
            Array.filter((item) => item.isDone === true).length <= 0
              ? 'hidden'
              : '',
          ].join(' ')}
        >
          Clear completed
        </button>
      </footer>
    )
  }
}
